<template>
  <div class="main-body">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="search" type="primary" :disabled="$hasBP('bnt.sysDept.list')  === false" @click="doSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="$hasBP('bnt.sysDept.list')  === false" @click="refreshForm" icon="refresh">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="plus" type="primary" :disabled="$hasBP('bnt.sysDept.add')  === false" @click="handleAdd">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表格树内容栏-->
    <cm-table
      rowKey="id"
      ref="tableRef"
      :get-page="api.listTree"
      :filters="filters"
      :columns="columns"
      :showBatchDelete="false"
      :showPagination="false"
      :operations="operations"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
    ></cm-table>
  </div>
  <el-dialog
    :title="isEdit ? '编辑' : '添加'"
    width="40%"
    draggable
    v-model="dialogVisible"
    :close-on-click-modal="false"
    @close="doClose"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="formRef"
      @keyup.enter="handleSubmit"
      label-width="80px"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item label="上级" prop="parentId">
        <el-cascader
          v-model="form.parentId"
          :props="{ label: 'name', value: 'id', checkStrictly: true, emitPath: false }"
          :options="deptData"
          clearable
          filterable
          class="w100p"
        ></el-cascader>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="doClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
/*import { listTree, getDeptById, save, update, remove } from '@/apis/app-dept'*/
import api from '@/apis/app-dept'
import useTableHandlers from '@/apis/use-table-handlers'
const filters = reactive({
  name: ''
});
const form = reactive({
  id: '',
  name: '',
  parentId: null,
});
const {
  tableRef,
  dialogVisible,
  isEdit,
  formLoading,
  formRef,
  doSearch,
  doAdd,
  doEdit,
  doRemove,
  doSubmit,
  doClose
} = useTableHandlers(form);
const deptData = ref([])

const columns = computed(() => [
/*  { prop: "id", label: t("thead.ID") },*/
  { prop: "name", label: "名称" },
  { prop: "createTime", label: "创建时间", minWidth: 160 },
  { prop: "updateTime", label: "修改时间", minWidth: 160 },
])

const operations = computed(() => [
  {
    type: 'edit',
    perm:'bnt.sysDept.update'
  },
  {
    type: 'delete',
    perm:'bnt.sysDept.remove'
  }
])

const rules = computed(() => {
  return {
    name: [
      { required: true, message: '请输入名称', trigger: ['change', 'blur'] }
    ]
  }
})

// methods
function initFormRequest(row) {
  api.listTree().then(res => {
    deptData.value = res.data;
  })
}
function handleAdd() {
  initFormRequest();
  doAdd();
}
function refreshForm(){
  filters.name = ''
  doSearch()
}
function handleEdit(row) {
  initFormRequest();
  doEdit(api.getDeptById, row.id)
}
function handleDelete(ids, callback) {
  doRemove(api.remove, ids, callback)
}
function handleSubmit() {
  if(form.id && form.parentId && form.id == form.parentId){
    ElMessage({message: '上级部门不能和当前部门相同', type: "error"});
    return;
  }
  doSubmit({save: api.save, update: api.update});
}

onMounted(() =>{

});
</script>
